<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>日志查询</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="./layui/css/layui.css" />
</head>

<body>
<!-- 依 赖 脚 本 -->
<script src="./layui/layui.js"></script>

<!--展示框-->
<div style="padding: 16px;">
	<div class="layui-card" style="position: sticky;top: 0;z-index: 1000;border-bottom: 1px solid black;">
		<!--查询框-->
		<div class="layui-btn-container" style="padding: 10px;">
			<form id="default-search-form" lay-filter='default-search-form' class="layui-form layui-form-pane" onsubmit="return false;">
				<div class="layui-form-item" style="margin-bottom: 0px;">
					<div class="layui-inline-sm">
						<label class="layui-form-label">Trace_Id</label>
						<div class="layui-input-inline">
							<input type="keyword" name="traceId" lay-affix="clear" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline-sm">
						<button type="button" class="layui-btn layui-btn" id="default-search-btn"><i class="layui-icon"></i> 搜 索</button>
						<button type="reset" class="layui-btn layui-btn swiper-right-form-reset" id="default-reset-btn">重 置</button>
						<a href="/component/log/v1/api/download">下载全部日志</a>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card" style="height: fit-content; overflow-y: scroll;">
		<div class="layui-card-body">
			<div id="default-table"></div>
		</div>
	</div>
</div>

<!--脚本-->
<script>
	layui.use(['form'], function () {
		var $ = layui.jquery;
		console.log('page init start...')

		function postJson(url, param, successCallBackFn, failCallbackFn, options) {
			$.ajax({
				type: "POST",
				url: url,
				async: (options==undefined || options.async==undefined)?true:options.async,
				contentType: 'application/json',
				// beforeSend: this.before,
				data: JSON.stringify(param),
				success: function (res) {
					if (successCallBackFn != null && successCallBackFn != undefined) {
						successCallBackFn(res);
					}
				},
				error: function (err) {
					console.log("err", err)
					if (failCallbackFn != null && failCallbackFn != undefined) {
						failCallbackFn(res);
					}else {
						layer.error(err)
					}
				}
			});
		}

		// 设置事件
		$('#default-search-btn').on('click', function () {
			console.log('search............');
			var formData = layui.form.val('default-search-form');
			postJson('/component/log/v1/api/list',formData, function (res) {
				$('#default-table').empty();
				layer.msg("操作成功！");
				if (res && res.data) {
					var msg = ''
					for(var i =0; i < res.data.length;i++) {
						var data = res.data[i];
						msg += '<a><p style="font-weight: bold; font-size: 24px;">'+data.filePath+'</p></a><br />'
						if (data.log) {
							for (var j=0;j<data.log.length;j++) {
								var tmpdata = data.log[j];
								msg += tmpdata
							}
						}
					}
					$('#default-table').html(msg)
				}
			})
		});

	});
</script>

</body>

</html>